<template>
  <div id="app">
    <div class="topHead">
      <h3>用户管理</h3>
    </div>
    <div class="content">
      <div class="tableTop">
        <van-cell is-link @click="showPopup"><button class="newBtn">新建</button></van-cell>
        <van-popup
          v-model:show="show"
          round
          style="width: 600px; height: 450px; position: relative; top: 320px; float: left"
        >
          <h5>新建/编辑用户</h5>
          <div class="nspa">
            <div class="name ipt1">
              <p>姓名</p>
              <input type="text" />
            </div>
            <div class="sex ipt1">
              <p>性别</p>
              <select name="" id="" style="width: 220px; height: 25.5px">
                <option value=""></option>
                <option value="1">男</option>
                <option value="2">女</option>
              </select>
            </div>
            <div class="phone ipt1">
              <p>联系电话</p>
              <input type="text" />
            </div>
            <div class="age ipt1">
              <p>年龄</p>
              <input type="text" />
            </div>
          </div>
          <div class="adress" style="position: absolute; left: -96px; top: 180px">
            <p style="font-weight: 600">详细地址</p>
            <van-field
              v-model="fieldValue"
              style="position: relative; top: -10px; left: 23px; z-index: 3"
              is-link
              readonly
              label="地区"
              placeholder="请选择所在地区"
              @click="show = true"
            />
            <van-cascader
              v-model="cascaderValue"
              closeable="false"
              close-icon
              style="width: 300px; position: absolute; top: 80px; left: 120px"
              title="请选择所在地区"
              :options="options"
              @finish="onFinish"
            />
          </div>
          <input
            class="detailAdress"
            type="text"
            placeholder="请输入详细地址"
            style="position: absolute; top: 210px; left: 260px; width: 290px"
          />
          <button class="cancel" @click="cancel()" style="position:absolute;top:400px;right: 130px;width: 70px;height: 28px; border: none;">取消</button>
          <button class="save" style="position:absolute;top:400px;right: 50px;width: 70px;height: 28px; border: none; background-color: #3EA6F7;">保存</button>
        </van-popup>
        <input class="sousuo" type="text" placeholder="按关键字搜索" />
        <button class="quash">撤销</button>
      </div>
      <table class="table table-bordered">
        <thead>
          <tr style="background-color: #ececec">
            <th style="width: 30px"></th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>联系电话</th>
            <th style="width: 500px">详细地址</th>
            <th style="width: 150px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" /></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
              <button class="btn1">编辑</button>
              <button class="btn1">删除</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
              <button class="btn1">编辑</button>
              <button class="btn1">删除</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
              <button class="btn1">编辑</button>
              <button class="btn1">删除</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
              <button class="btn1">编辑</button>
              <button class="btn1">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    const show = ref(false)
    const fieldValue = ref('')
    const cascaderValue = ref('')
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = [
      {
        text: '广东省',
        value: '330000',
        children: [
          {
            text: '广州市',
            value: '330100',
            children: [
              { text: '番禺区', value: '330101' },
              { text: '越秀区', value: '330102' },
              { text: '花都区', value: '330103' },
              { text: '海珠区', value: '330104' },
              { text: '天河区', value: '330105' }
            ]
          }
        ]
      }
    ]
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      fieldValue.value = selectedOptions.map((option) => option.text).join('/')
    }
    const showPopup = () => {
      show.value = true
    }
    const cancel = () => {
      show.value = false
    }
    return {
      show,
      showPopup,
      options,
      onFinish,
      fieldValue,
      cascaderValue,
      cancel
    }
  },
}
</script>

<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  .topHead {
    height: 80px;
    width: 100%;
    background-color: #ececec;
    h3 {
      line-height: 80px;
    }
  }
  .content {
    width: 80%;
    height: 550px;
    margin: 0 auto;
    .tableTop {
      margin: 40px;
      position: relative;
      .newBtn {
        width: 65px;
        height: 30px;
        background-color: #ececec;
        border: none;
        position: absolute;
        left: -40px;
      }
      .sousuo {
        position: absolute;
        background-color: #ececec;
        left: 50px;
        width: 250px;
        height: 30px;
        border: none;
      }
      .quash {
        width: 65px;
        height: 30px;
        background-color: #ececec;
        border: none;
        position: absolute;
        right: -40px;
      }
    }
    .table {
      position: absolute;
      top: 160px;
      width: 80%;
      thead {
        tr {
          th {
            border: 0px;
          }
        }
      }
      tbody {
        tr {
          td {
            border-right-style: none;
            border-left-style: none;
            border-top-style: none;
          }
        }
      }
    }
  }
}
.btn1 {
  border: none;
  margin-left: 10px;
}
h5 {
  margin-top: 10px;
  font-weight: 700;
}
.nspa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.ipt1 {
  margin-top: 10px;
  p {
    font-weight: 600;
    margin: 0 0 5px;
    position: relative;
    left: -83px;
  }
  input {
    width: 220px;
  }
}
.name {
  p {
    left: -96px;
  }
}
.sex {
  p {
    left: -96px;
  }
}
</style>
